<template>
  <div>
    <x-Table
      :loading="loading"
      :table-data="tableData"
      :options-data="options"
      :rule-form="ruleForms"
      :isPage="false"
      @handleAdd="handleAdd"
      @handleHeardDel="handleHeardDel"
      @searchForm="searchForm"
      @resetForm="resetForm"
    >
    </x-Table>

    <!--    弹窗区域-->
    <el-dialog v-dialog-drag :title="alertTitle"
               :visible.sync="dialogVisible"
               :close-on-click-modal=false
               width="45%"
    >

      <form-create
        v-model="fapi"
        :rule="rule"
        :option="option"
        :value.sync="formParam"
        @submit="onSubmit"
      >
        <template slot="type-field-component">
          <el-popover
            style="width: 400px"
            placement="bottom-start"
            width="430"
            trigger="click"
          >
            <div class="select-icon">
              <el-card @click="selectIcon(item)" v-for="(item,index) in iconData " :key="index" shadow="hover"
                       class="box-card">
                <vab-icon @click="selectIcon(item)" class="select-icon-text" :icon="['fas', item]"/>
              </el-card>
              <div style="display: flex;justify-content: center;width: 100%;margin-top: -10px">
                <el-pagination
                  @size-change="IconSizeChange"
                  @current-change="IconCurrentChange"
                  small
                  layout="prev, pager, next"
                  :page-size="40"
                  :total="960">
                </el-pagination>
              </div>
            </div>
            <div slot="reference">
              <el-input
                v-model="formParam.icon"
                class="selecIconInput"
                prefix-icon="el-icon-search"
                style="width: 100%;"
                placeholder="请选择内容"
                clearable
                readonly
              >
                <i slot="suffix" class="el-icon-caret-bottom"></i>
              </el-input>
            </div>
          </el-popover>
        </template>
      </form-create>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this;
import icon from '../../../../data/icon';

export default {
  data() {
    return {
      searchParams: {},//搜索对象
      row: null,
      loading:true,
      iconData: [],//所有icon图标
      fapi: {},
      formParam: {icon: 'th-large'},
      rule: [
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "cascader",
                  "field": "pids",
                  "title": "上级菜单",
                  "info": "",
                  "effect": {
                    "fetch": {
                      action: "http://www.free.com/adminapi/v1.setting.SystemMenus/getMenusList",
                      to: "props.options",
                      method: "GET",
                      parse(res) {
                        function tidy(list) {
                          console.log(list);
                          return list.map(val => {
                            return {
                              value: val.id,
                              label: val.meta.title,
                              children: val.children ? tidy(val.children) : undefined
                            };
                          });
                        }

                        return tidy(res.data);
                      }
                    }
                  },
                  "props": {
                    "clearable": true,
                    "props": {"checkStrictly": true},
                    "options": [
                      {
                        "value": "zhinan",
                        "label": "指南",
                        "children": [
                          {
                            "value": "shejiyuanze",
                            "label": "设计原则",
                            "children": [
                              {
                                "value": "yizhi",
                                "label": "一致"
                              },
                              {
                                "value": "fankui",
                                "label": "反馈"
                              },
                              {
                                "value": "xiaolv",
                                "label": "效率"
                              },
                              {
                                "value": "kekong",
                                "label": "可控"
                              }
                            ]
                          },
                          {
                            "value": "daohang",
                            "label": "导航",
                            "children": [
                              {
                                "value": "cexiangdaohang",
                                "label": "侧向导航"
                              },
                              {
                                "value": "dingbudaohang",
                                "label": "顶部导航"
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "value": "zujian",
                        "label": "组件",
                        "children": [
                          {
                            "value": "basic",
                            "label": "Basic",
                            "children": [
                              {
                                "value": "layout",
                                "label": "Layout 布局"
                              },
                              {
                                "value": "color",
                                "label": "Color 色彩"
                              },
                              {
                                "value": "typography",
                                "label": "Typography 字体"
                              },
                              {
                                "value": "icon",
                                "label": "Icon 图标"
                              },
                              {
                                "value": "button",
                                "label": "Button 按钮"
                              }
                            ]
                          },
                          {
                            "value": "form",
                            "label": "Form",
                            "children": [
                              {
                                "value": "radio",
                                "label": "Radio 单选框"
                              },
                              {
                                "value": "checkbox",
                                "label": "Checkbox 多选框"
                              },
                              {
                                "value": "input",
                                "label": "Input 输入框"
                              },
                              {
                                "value": "input-number",
                                "label": "InputNumber 计数器"
                              },
                              {
                                "value": "select",
                                "label": "Select 选择器"
                              },
                              {
                                "value": "cascader",
                                "label": "Cascader 级联选择器"
                              },
                              {
                                "value": "switch",
                                "label": "Switch 开关"
                              },
                              {
                                "value": "slider",
                                "label": "Slider 滑块"
                              },
                              {
                                "value": "time-picker",
                                "label": "TimePicker 时间选择器"
                              },
                              {
                                "value": "date-picker",
                                "label": "DatePicker 日期选择器"
                              },
                              {
                                "value": "datetime-picker",
                                "label": "DateTimePicker 日期时间选择器"
                              },
                              {
                                "value": "upload",
                                "label": "Upload 上传"
                              },
                              {
                                "value": "rate",
                                "label": "Rate 评分"
                              },
                              {
                                "value": "form",
                                "label": "Form 表单"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  "_fc_drag_tag": "cascader",
                  "hidden": false,
                  "display": true,
                  "value": []
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  on: {
                    change: (val) => {
                      _this.switchCut(val);
                    }
                  },
                  "type": "radio",
                  "field": "menutype",
                  "title": "菜单类型",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  "options": [
                    {
                      "value": "1",
                      "label": "菜单"
                    },
                    {
                      "value": "0",
                      "label": "按钮"
                    }
                  ],
                  "_fc_drag_tag": "radio",
                  "hidden": false,
                  "display": true,
                  "value": "1"
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "title",
                  "title": "菜单名称",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true,
                  "props": {
                    "clearable": true
                  },
                  "validate": [
                    {
                      "mode": "required",
                      "trigger": "change",
                      "message": "请输入菜单名称",
                      "type": "string"
                    }
                  ]
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },

              "children": [
                {
                  "type": "radio",
                  "field": "openMode",
                  "title": "打开方式",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  on: {
                    change: (val) => {
                      if (val === '组件') {
                        _this.fapi.mergeRule('routePath', {title: '路由地址', info: ''});
                        _this.fapi.disabled(false, 'component');
                      } else {
                        _this.fapi.mergeRule('routePath', {title: '外链地址', info: '需要以`http://`,`https://`,`//`开头'});
                        _this.fapi.disabled(true, 'component');
                      }
                      _this.fapi.sync("component");
                    }
                  },
                  "options": [
                    {
                      "value": "1",
                      "label": "组件"
                    },
                    {
                      "value": "2",
                      "label": "外链"
                    }
                  ],
                  "_fc_drag_tag": "radio",
                  "hidden": false,
                  "display": true,
                  "value": '1'
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "el-divider",
          "wrap": {
            "show": false
          },
          "native": false,
          "children": [
            ""
          ],
          "_fc_drag_tag": "el-divider",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "fieldComponent",
                  "field": "icon",
                  "title": "菜单图标",
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "permission",
                  "title": "权限标识",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true,
                  "props": {
                    "clearable": true
                  }
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "routePath",
                  "title": "路由地址",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true,
                  "props": {
                    "clearable": true
                  }
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "inputNumber",
                  "field": "weight",
                  "title": "权重",
                  "info": "",
                  "props": {
                    "step": 1,
                    "min": 1
                  },
                  "_fc_drag_tag": "inputNumber",
                  "hidden": false,
                  "display": true,
                  "validate": [
                    {
                      "trigger": "change",
                      "mode": "required",
                      "message": "请输入权重",
                      "required": true,
                      "type": "number"
                    }
                  ]
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "component",
                  "title": "组件路径",
                  "info": "上级菜单为空是组件地址为Layout或EmptyLayout",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true,
                  "props": {
                    "clearable": true
                  }
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "radio",
                  "field": "isShow",
                  "title": "是否可见",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  "options": [
                    {
                      "value": false,
                      "label": "显示"
                    },
                    {
                      "value": true,
                      "label": "隐藏"
                    }
                  ],
                  "_fc_drag_tag": "radio",
                  "hidden": false,
                  "display": true,
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "radio",
          "field": "status",
          "title": "状态",
          "info": "",
          "effect": {
            "fetch": ""
          },
          "options": [
            {
              "value": true,
              "label": "正常"
            },
            {
              "value": false,
              "label": "隐藏"
            }
          ],
          "_fc_drag_tag": "radio",
          "hidden": false,
          "display": true,
          "value": "1"
        },
        {
          "type": "el-transfer",
          "field": "permissionNode",
          "title": "权限节点",
          "info": "",
          "props": {
            "data": [
              {
                "key": '查询',
                "label": "查询",
                "disabled": false
              },
              {
                "key": '添加',
                "label": "添加",
                "disabled": false
              },
              {
                "key": '编辑',
                "label": "编辑",
                "disabled": false
              },
              {
                "key": '删除',
                "label": "删除",
                "disabled": false
              },
              {
                "key": '状态',
                "label": "状态",
                "disabled": false
              },
              {
                "key": '批量删除',
                "label": "批量删除",
                "disabled": false
              },
              {
                "key": '导出数据',
                "label": "导出数据",
                "disabled": false
              },
              {
                "key": '导入数据',
                "label": "导入数据",
                "disabled": false
              }
            ]
          },
          "_fc_drag_tag": "el-transfer",
          "hidden": false,
          "display": true,
          "value": ['查询', '添加', '编辑', '删除','批量删除','状态']
        },
        {
          "type": "input",
          "field": "remark",
          "title": "备注",
          "info": "",
          "props": {
            "type": "textarea"
          },
          "_fc_drag_tag": "input",
          "hidden": false,
          "display": true
        }
      ],
      option: {
        "form": {
          "inline": false,
          "labelPosition": "right",
          "size": "small",
          "labelWidth": "125px",
          "hideRequiredAsterisk": false,
          "showMessage": true,
          "inlineMessage": false
        },
        resetBtn: true
      },
      dialogVisible: false,
      alertTitle: "添加",
      tableData: [
        {
          "id": 1,
          "pid": 0,
          "path": "/permission",
          "rule": "",
          "name": "Permission",
          "isMenu": 1,
          "status": 1,
          "weight": 1,
          "remake": null,
          "component": "Layout",
          "redirect": "noRedirect",
          "alwaysShow": 0,
          "level": 0,
          "children": [
            {
              "id": 2,
              "pid": 1,
              "path": "/user",
              "rule": "",
              "name": "User",
              "isMenu": 0,
              "status": 0,
              "weight": 1,
              "remake": null,
              "component": "@/views/permission/user.vue",
              "redirect": null,
              "alwaysShow": 0,
              "level": 1,
              "menuType": "按钮",
              "meta": {
                "id": 2,
                "menu_id": 2,
                "title": "用户管理",
                "icon": null,
                "affix": 0,
                "noKeepAlive": 1,
                "badge": null,
                "titleLevel": "|-用户管理"
              }
            },
            {
              "id": 3,
              "pid": 1,
              "path": "/auth",
              "rule": "",
              "name": "Auth",
              "isMenu": 0,
              "status": 0,
              "weight": 1,
              "remake": null,
              "component": "@/views/permission/auth.vue",
              "redirect": null,
              "alwaysShow": 0,
              "level": 1,
              "meta": {
                "id": 3,
                "menu_id": 3,
                "title": "角色管理",
                "icon": null,
                "affix": 0,
                "noKeepAlive": 1,
                "badge": null,
                "titleLevel": "|-角色管理"
              }
            },
            {
              "id": 4,
              "pid": 1,
              "path": "/menu",
              "rule": "",
              "name": "Menu",
              "isMenu": 0,
              "status": 1,
              "weight": 1,
              "remake": null,
              "component": "@/views/permission/menu.vue",
              "redirect": null,
              "alwaysShow": 0,
              "level": 1,
              "menuType": "外链",
              "meta": {
                "id": 4,
                "menu_id": 4,
                "title": "菜单管理",
                "icon": null,
                "affix": 0,
                "noKeepAlive": 1,
                "badge": null,
                "titleLevel": "|-菜单管理"
              }
            }
          ],
          "menuType": "菜单",
          "meta": {
            "id": 1,
            "menu_id": 1,
            "title": "权限管理",
            "icon": "box-open",
            "affix": null,
            "noKeepAlive": null,
            "badge": null,
            "titleLevel": "权限管理"
          }
        }
      ],
      options: {
        rowKey: "id",
        relevancykey: ["meta"],//有关联情况
        fields: {
          id: {label: "ID", prop: "id", width: "120", order: true},
          title: {label: "标题", prop: "title", type: "two", options: {obj: "meta", objKey: "title"}},
          menuType: {
            label: "菜单类型",
            prop: "menu",
            type: "tag",
            options: [{label: '菜单', attr: "primary"}, {label: '按钮', attr: "info"}]
          },
          routeAddr: {label: "路由地址", prop: "path"},
          componentPath: {label: "组件路径", prop: "component"},
          Permission: {label: "权限标识", prop: "front"},
          weight: {label: "权重", prop: "weight"},
          status: {
            label: "状态",
            prop: "hidden",
            width: "",
            type: "statusText",
            options: [{label: "正常", value: false, color: "#18bc9c"}, {label: "隐藏", value: true, color: "red"}]
          },
          create_at: {label: "创建时间", prop: "create_time"},
          button: {
            label: "操作", width: "130", type: "func", edit: function (scope) {
              if (scope['row']['menu'] === '菜单') {
                _this.searchPidAndNotMenu(scope['row'].id);
              }
              console.log(scope['row'])
              _this.row = scope["row"];
              _this.alertTitle = "编辑";
              _this.dialogVisible = true;
              setTimeout(() => {
                _this.fapi.setValue("pids", scope["row"].pids != null ? scope["row"]['pids'].split(',').map(Number) : '');
                _this.fapi.setValue("title", scope["row"].meta.title);
                _this.fapi.setValue("weight", scope["row"].weight);
                _this.fapi.setValue("status", scope["row"].status);
                _this.fapi.setValue("component", scope["row"].component);
                _this.fapi.setValue("routePath", scope["row"].path);
                _this.fapi.setValue("isShow", scope["row"].hidden);
                _this.fapi.setValue("icon", scope["row"].meta.icon);
                _this.fapi.setValue("menutype", scope["row"].menu === '菜单' ? '1' : '0');
                if (scope['row']['menu'] === '按钮') {
                  _this.switchCut('按钮')
                  _this.fapi.setValue("permission", scope["row"].front);
                } else {
                  _this.switchCut('菜单')
                }
                // _this.fapi.setValue("permissionNode", scope["row"].front != null ? scope["row"].front.split(',') : '');
                _this.fapi.sync("component");

              }, 0);

            }, del: function (scope) {
              _this.delMenu(scope['row'].id)
            }
          }
        }
      },
      ruleForms: {
        title: {label: "标题", prop: "title", type: "text"},
      }
    };
  },
  methods: {
    /**
     * 切换菜单类型与按钮类型状态
     */
    switchCut: function (val) {
      if (val === "菜单") {
        _this.fapi.setValue('isShow', false)
        _this.fapi.setValue('openMode', '1')
        _this.fapi.display(true, "permissionNode");
        _this.fapi.disabled(true, "permission");
        _this.fapi.disabled(false, "icon");
        _this.fapi.disabled(false, "routePath");
        _this.fapi.disabled(false, "component");
        _this.fapi.disabled(false, "isShow");
        _this.fapi.disabled(false, "openMode");
      } else {
        _this.fapi.setValue('isShow', true)
        _this.fapi.setValue('openMode', '')
        _this.fapi.setValue('component', '')
        _this.fapi.setValue('routePath', '')
        _this.fapi.setValue('icon', '')

        _this.fapi.disabled(true, "icon");
        _this.fapi.disabled(true, "routePath");
        _this.fapi.disabled(true, "component");
        _this.fapi.display(true, "fieldComponent");
        _this.fapi.disabled(true, "isShow");
        _this.fapi.disabled(true, "openMode");
        _this.fapi.disabled(false, "permission");
        _this.fapi.display(false, "permissionNode");
      }
      _this.fapi.sync("permission");
      _this.fapi.sync("icon");
      _this.fapi.sync("routePath");
      _this.fapi.sync("component");
      _this.fapi.sync("isShow");
      _this.fapi.sync("openMode");
    },
    IconSizeChange: function (val) {

    },
    searchPidAndNotMenu: function (val) {
      setTimeout(() => {
        _this.fapi.setValue("permissionNode", []);
      }, 0)
      _this.$store.dispatch('admin/searchPidAndNotMenu', {
        id: val
      }).then(res => {
        const {data} = res;
        let obj = [];
        data.forEach((item, indx) => {
          obj.push(item.front);
        })
        if (obj.length > 0) {
          _this.fapi.setValue("permissionNode", obj.length > 0 ? obj : '');
        }
      })
    },
    IconCurrentChange: function (val) {
      _this.iconDateF(val);
    },
    handleHeardDel: function (val) {
      let data = [];
      val.forEach((item, index) => {
        data.push(item.id)
      })
      _this.delMenu(data);
    },
    resetForm:function (){
      _this.searchParams = {};
    },
    searchForm: function (val) {
      _this.searchParams = val;
      this.$store.dispatch('admin/searchMenusTitle', {
        title: val['title']
      }).then(() => {
        _this.dialogVisible = false;
        let data = _this.$store.state.admin.menuList;
        _this.tableData = _this.$store.state.admin.menuList;
      })
    },

    getMenuList: function () {
      _this.$store.dispatch('admin/getList').then(() => {
        _this.loading = false;
        _this.dialogVisible = false;
        let data = _this.$store.state.admin.menuList;
        _this.tableData = _this.$store.state.admin.menuList;
      })
    },

    addMenu: function (val) {
      _this.$store.dispatch('admin/addMenus', {
        pid: val['pids'].length > 0 ? val['pids'][(val['pids'].length - 1)] : '',
        pids: val['pids'].length > 0 ? val['pids'].join() : '',
        name: val['title'],
        title: val['title'],
        hidden: val['isShow'],
        icon: val['icon'],
        weight: val['weight'],
        status: val['status'],
        menu: val['menutype'],
        condition: val['remark'],
        remixIcon: val['icon'],
        permission: val['permission'],
        routePath: val['routePath'],
        componentsPath: val['component'],
        front: val['permissionNode'] == null ? '' : val['permissionNode'].join()
      }).then(res => {
        const {data, msg} = res;
        if (data) {
          _this.$message.success(msg);
          _this.getMenuList();
        } else {
          _this.$message.error(msg);
        }
      })
    },
    delMenu: function (val) {
      _this.$store.dispatch('admin/menusDelete', {
        id: val
      }).then(res => {
        const {data, msg} = res;
        if (data) {
          _this.$message.success(msg);
          _this.getMenuList();
        } else {
          _this.$message.error(msg);
        }
      })
    },
    updateMenu: function (val) {
      // val['menutype'] === 1 ? val['menutype'] : '';
      _this.$store.dispatch('admin/updateMenus', {
        id: _this.row['id'],
        pid: val['pids'].length > 0 ? val['pids'][(val['pids'].length - 1)] : '',
        pids: val['pids'].length > 0 ? val['pids'].join() + '' : '',
        name: val['title'],
        title: val['title'],
        hidden: val['isShow'],
        icon: val['icon'],
        weight: val['weight'],
        permission: val['permission'],
        status: val['status'],
        menu: val['menutype'],
        condition: val['remark'],
        remixIcon: val['icon'],
        routePath: val['routePath'],
        componentsPath: val['component'],
        front: val['permissionNode'] == null ? '' : val['permissionNode'].join()
      }).then(res => {
        const {data, msg} = res;
        if (data) {
          _this.$message.success(msg);
          _this.getMenuList();
        } else {
          _this.$message.error(msg);
        }
      })
    },
    selectIcon: function (item) {
      _this.fapi.setValue('icon', item);
      _this.fapi.sync("icon");
    },
    iconDateF: function (page) {
      let data = page * 40;
      let count = (data - 40);
      if (page === 1) {
        count = 0;
      }
      _this.iconData.length = 0;
      for (let i = count; i < data; i++) {
        _this.iconData.push(icon.icon[i])
      }
      _this.fapi.refresh();
    },
    /**
     * 表单提交回调
     */
    onSubmit: function (val) {
      if (_this.alertTitle === '添加') {
        _this.addMenu(val);
      } else {
        _this.updateMenu(val)
      }
    },

    /**
     *  表单导航栏添加点击
     */
    handleAdd: function () {
      _this.alertTitle = '添加';
      this.dialogVisible = true;
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        setTimeout(() => {
          if (_this.alertTitle === '添加') {
            _this.fapi.disabled(true, "permission");
            _this.fapi.sync("permission");
          }
          _this.fapi.resetFields(); //清空数据
        }, 0)
      }
    }
  },
  created() {
    _this = this;
  },
  mounted() {
    _this.getMenuList();
    for (let i = 0; i < 40; i++) {
      _this.iconData.push(icon.icon[i])
    }
  },
};
</script>

<style scoped>
.box-card {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
  width: 40px;
  height: 40px;
  border: 1px solid #ededed;
}

.box-card:hover .select-icon-text {
  transform: scale(1.5);
  transition: .3s;
}

.arrow-down {
  transition: .3s;
  transform: rotateX(180deg);
}

.arrow-up {
  transform: rotateX(-180deg);
  transition: .3s;
}

.select-icon {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
  max-height: 300px;
}

>>> .selecIconInput input {
  cursor: pointer !important;
}
</style>
